<template>
  <div class="categories">
    <div class="tip">注：采购已做类目映射的Fineline, 系统会自动填充，不可修改</div>
    <el-form ref="ruleForm" :model="formDate" label-width="180px" size="mini">
      <div v-for="(channel,channelIndex) in formDate.categories" :key="channel.id" class="goodsList">
        <h2>
          <span>UPC：{{ channel.upc }}</span>
          <span>商品名称：{{ channel.skuName }}</span>
          <el-button v-if="!isDisabled&&channelIndex==0&&formDate.categories.length>1" type="text" size="mini" @click="oneClick">一键应用到其他商品</el-button>
        </h2>
        <el-form-item v-for="category in channel.elements" :key="category.name" :label="category.channelName">
          <el-cascader
            v-model="category.values"
            :disabled="isDisabled||!category.editable"
            :props="{ children: 'children', label: 'categoryName',expandTrigger: 'hover', value: 'categoryId', multiple:category.shopCategoryFlag==1}"
            :options="options[category.channelId + category.shopCategoryFlag]"
            separator=">"
            filterable
            clearable
          />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Categories',
  props: {
    formDate: {
      type: Object,
      default: () => {
        return {
          categories: []
        }
      }
    },
    options: {
      type: Object,
      default() {
        return {}
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    oneClick() {
      const obj = JSON.parse(JSON.stringify(this.formDate.categories[0].elements))
      const newVal = obj.filter((e) => Array.isArray(e.values))
      this.formDate.categories.forEach(e1 => {
        e1.elements.forEach(e2 => {
          if (e2.editable) {
            const i = newVal.findIndex((e3) => e3.name === e2.name)
            e2.values = newVal[i].values
          }
        })
      })
    },
    // Remove the rules
    removeRules() {
      this.$refs.ruleForm.resetFields()
      this.tipShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.categories{
  .tip{
    color: #aaa;
    font-size: 14px;
  }
  .goodsList{
    padding-top: 10px;
    border-bottom: dashed #ccc 1px;
    &:last-child{
      border-bottom: none;
    }
    h2{
      font-size: 14px;
      height: 40px;
      display: flex;
      align-items: center;
      span{
        margin-right: 20px;
      }
    }
    /deep/ .el-cascader{
      width: 450px;
    }
  }
}
</style>
